<template>
	<s-layout  navbar="custom1" :bgStyle="{
	 color: '#F8F8F8'
	}" onShareAppMessage>
		<assNavbar title="商务BD" :background="{img: 'none',BGcolor: '#fff'}"></assNavbar>
		
		
		
		
		<view class="form-box" >
			<view>
				<uni-forms ref="form" :modelValue="state.petData" :rules="rules" label-width="90">
					<view style="margin: 20rpx 24rpx ;padding:40rpx 30rpx;background-color: #fff;border-radius: 20rpx;">
						<view class="form-box-head-title">基础信息</view>
						<uni-forms-item label="姓名" name="host_name" required>
							<view class="form-box-input-item">
								<input type="text" v-model="state.form.name" placeholder="请输入姓名" @input="setValue('host_name',state.form.name)"/>
							</view>
						</uni-forms-item>
						<uni-forms-item label="手机号码" name="mobile" required>
							<view class="form-box-input-item">
								<input type="number" :maxlength="11" v-model="state.form.mobile" placeholder="请输入手机号码" @input="setValue('mobile',state.form.mobile)"/>
							</view>
						</uni-forms-item>
						
						<uni-forms-item label="所属地区" name="region" required>
							<view class="form-box-input-item" @click="state.showRegion=true">
								<view style="font-size:32rpx;">{{ state.address_txt || '请选择城市' }}</view>
								<uni-icons type="forward" size="22" color="#999999"></uni-icons>
							</view>
						</uni-forms-item>
						
						<uni-forms-item label="联系地址" name="detailed_address" required>
							<view class="form-box-input-item">
								<input type="text" v-model="state.form.detailed_address" placeholder="请输入联系地址" @input="setValue('detailed_address',state.form.detailed_address)"/>
							</view>
						</uni-forms-item>
						
					</view>
					
					
					<view style="margin: 20rpx 24rpx 0rpx 24rpx ;padding:40rpx 30rpx 0rpx 30rpx;background-color: #fff;border-radius: 20rpx;">
						<view class="form-box-head-title">个人信息</view>
						<uni-forms-item label="营业执照" name="avatar" required>
							<view class="form-box-input-item-left" >
								<s-uploader v-model:url="state.form.id_card_back" :limit="1" :sizeType="['original']" :imageStyles="{ width: '220rpx', height: '150rpx' }">
									<view style="height:150rpx; width: 220rpx;color:#777" 
									class="ss-flex ss-row-center">营业执照</view>
								</s-uploader>
							</view>
						</uni-forms-item>
						<uni-forms-item label="法人身份证" name="avatar" required>
							<view class="form-box-input-item-left" >
								<s-uploader
								fileMediatype="image"
								v-model:url="state.form.id_card_front" 
								:limit="1" 
								:sizeType="['original']"
								:imageStyles="{ width: '220rpx', height: '150rpx' }">
									<view style="height:150rpx; width: 220rpx;color:#777" 
									class="ss-flex ss-row-center">正面</view>
								</s-uploader>
								<s-uploader v-model:url="state.form.id_card_back" :limit="1" :sizeType="['original']" :imageStyles="{ width: '220rpx', height: '150rpx' }">
									<view style="height:150rpx; width: 220rpx;color:#777" 
									class="ss-flex ss-row-center">反面</view>
								</s-uploader>
							</view>
						</uni-forms-item>
						<uni-forms-item label="银行卡号" name="name" >
							<view class="form-box-input-item">
								<input type="text" v-model="state.form.name" placeholder="请输入银行卡号" />
							</view>
						</uni-forms-item>
						<uni-forms-item label="开户行" name="name" >
							<view class="form-box-input-item">
								<input type="text" v-model="state.form.name" placeholder="请输入开户行" />
							</view>
						</uni-forms-item>
						<uni-forms-item label="银行名称" name="name" >
							<view class="form-box-input-item">
								<input type="text" v-model="state.form.name" placeholder="请输入银行名称" />
							</view>
						</uni-forms-item>
						<uni-forms-item label="公司电话" name="name" >
							<view class="form-box-input-item">
								<input type="text" v-model="state.form.name" placeholder="请输入公司电话" />
							</view>
						</uni-forms-item>
						<uni-forms-item label="公司税号" name="name" >
							<view class="form-box-input-item">
								<input type="text" v-model="state.form.name" placeholder="请输入公司税号" />
							</view>
						</uni-forms-item>
					</view>
				</uni-forms>
			</view>
		</view>
		
		<su-fixed bottom>
			<view class="bg-white ss-p-t-20 ss-p-b-60 ss-flex justify-center">
				<button class="btn ss-reset-button " @tap="submit()">
					提交资料
				</button>
			</view>
			
		</su-fixed>
		
	</s-layout>
	
	
	<!-- 地址选择弹窗 -->
	<su-region-picker :show="state.showRegion" @cancel="state.showRegion = false" @confirm="onRegionConfirm" />

</template>

<script setup>
	import assNavbar from '@/components/ass-navbar.vue';
	import {
		onLoad,
		onShow,
		onUnload
	} from '@dcloudio/uni-app';
	import Test from "@/sheep/helper/test.js";
	import {
		ref,
		computed,
		reactive
	} from 'vue';
	import sheep from '@/sheep';
	import  { clone } from 'lodash'
	
	
	const form = ref(null);
	
	// 数据
	const state = reactive({
		showRegion:false,
		form:{
			id_card_back:'',
			front:'',
		},
		address_txt:'',
	
		
	});
	

	
	const rules = {
		// 对name字段进行必填验证
		name: {
			rules: [{
					required: true,
					errorMessage: '请填写姓名',
				},
				{
					minLength: 1,
					maxLength: 6,
					errorMessage: '姓名长度在 {minLength} 到 {maxLength} 个字符',
				}
			]
		},
		
		mobile: {
			rules: [{
				required: true,
				errorMessage: '请输入联系电话',
			},{
				validateFunction: (rule, value, data, callback) => {
					// 异步需要返回 Promise 对象
					return new Promise((resolve, reject) => {
						if (Test.mobile(value)) {
							resolve()
						} else {
							reject(new Error('联系电话格式错误'))
						}
					})
				}
			}]
		},
		
	}
	
	
	//选择地区
	const onRegionConfirm = (e)=>{
		console.log(e)
		state.showRegion = false;
		
		if(e.province_name=='全部'){
			return false;
		};
		
		
		
		state.address_txt =e.province_name+e.city_name+e.district_name;
		// state.form.province_id = e.province_id;
		// state.form.city_id = e.city_id;
		// state.form.district_id = e.district_id;
		form.value.setValue('region',state.address_txt);
	}
	
	
	

	

	const submit = () => {
		
		form.value.validate().then(async formVal => {
			
			if (!state.avatar) {
				uni.showToast({
					title: '请检查是否有漏填项',
					icon: 'none',
					duration: 2000
				});
				return false;
			}
			
		}).catch(err => {
			console.log('err------',err);
			uni.showToast({
				title: err[0].errorMessage,
				icon: 'none',
				duration: 2000
			})
		})
	}


	
	onLoad(async(e) => {
		
	})

	
	function setValue(name,value){
		form.value.setValue(name,value);
	}
	
	onUnload(() => {
		
	})
</script>

<style lang="scss" scoped>
	
	view {
		box-sizing: border-box;
	}
	.btn{
		  width: 702rpx;
		  height: 80rpx;
		  background: #003288;
		  border-radius: 49rpx;
		  font-size: 32rpx;
		  color: #FFFFFF;
	  }
	::v-deep {
		// .radio__inner{
		// 	border-color: #ffdfc7!important;
		// }
		// .radio__inner-icon{
		// 	border-color: #ffdfc7!important;
		// 	background-color:var(--ui-BG-5)!important;
		// }
		
		
		.uni-forms-item__inner {
			padding-bottom: 20rpx
		}

		.uni-error-message {
			height: 20rpx;
			display: flex;
		}

		.uni-error-message-text {
			font-size: 20rpx;
			line-height: 1;
		}
	}

	

	


	
	.form-box {
		width: 100%;
		border-radius: 24rpx 24rpx 0 0;
		background: #F8F8F8;;
		
		position: relative;

	}
	
	.form-box-input-item-left {
		width: 100%;
		height: 160rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;

		view{
			
		}
	}

	.form-box-input-item {
		display: flex;
		justify-content: flex-end;
		align-items: center;

		input {
			padding-top:12rpx;
			font-size:32rpx;
			text-align: right;
		}
	}

	::v-deep .uni-forms-item__label {
		width:180rpx!important;
		.label-text{
			font-size:32rpx
		}
	}

	::v-deep .uni-forms-item__inner {
		padding-bottom: 0;
		padding-top:20rpx;
		border-bottom: 1rpx solid #F5F5F5;
	}

	

	


	.form-box-head-title{
		height: 32rpx;
		font-family: 'Source Han Sans CN';
		font-weight: bold;
		font-size: 32rpx;
		color: #323232;
		line-height: 48rpx;
		text-align: left;
		font-style: normal;
		margin-bottom: 30rpx;
	}
	
	.chongwu-zhaopian{
		width:100rpx;
		height:120rpx;
	}
	
</style>